<template>
	<div id="promotionList" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>经营设置</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/promotionList' }">促销管理</el-breadcrumb-item>
						<el-breadcrumb-item>促销项目</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">添加时间:</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="结束时间"></el-date-picker>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-button type="primary" size="medium" @click="search_promotion()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">状态:</span>
							<el-select size="medium" v-model="chooseStatus" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.id"></el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="search_promotion()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>

		<div class="same-table-box">
			<div class="tabel_header">
				<h4 class="same-title-box">促销项目
					<div class="same-search-total"></div>
				</h4>
				<div class="same-left-one">
					<el-button type="primary" size="mini" @click="promotionAdd()" icon="el-icon-circle-plus">添加促销项目</el-button>
				</div>
			</div>
			<div class="common-table-outer">
				<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
					:data="tableData" stripe>
					<el-table-column header-align="center" width="70" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(pageNo-1)*pageSize}}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="name" label="项目名称">
					</el-table-column>
					<el-table-column align="center" prop="name" label="金额">
						<template slot-scope="scope">
							{{ scope.row.money|filterNumber }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="address" label="状态">
						<template slot-scope="scope">
							<el-tag size="mini" type="success" v-if="scope.row.status == 1">启用</el-tag>
							<el-tag size="mini" type="warning" v-else-if="scope.row.status == 2">禁用</el-tag>
							<span v-else>--</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="time" label="添加时间">
					</el-table-column>
					<el-table-column align="center" prop="is_deleted" label="是否删除">
						<template slot-scope="scope">
							<span v-if="scope.row.is_deleted == 1">是</span>
							<span v-if="scope.row.is_deleted == 2">否</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-link class="custom-link" @click="edit(scope.row.id)">编辑</el-link>
							<el-link class="custom-link"  @click="del(scope.row.id)">删除</el-link>
						</template>
					</el-table-column>

					<template slot="empty" v-if="isLoad">
						<div class="new-no-data-show">
							<img src="../../assets/images/no-data.png" alt="">
							<div>暂无相关数据</div>
						</div>
					</template>
				</el-table>

				<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
					<el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
						:page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
					</el-pagination>
				</div>

			</div>
		</div>
	</div>
	</div>
</template>
<script>
	export default {
		name: 'promotionList',
		data: function () {
			return {
				loading: false,
				isLoad: false,
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				userAgent: '',
				userinfo: [],
				statusList: [
					{
						id: 0,
						label: '全部'
					},
					{
						id: 1,
						label: '启用'
					},
					{
						id: 2,
						label: '禁用'
					}
				],
				value2: '',
				start_time: '',
				end_time: '',
				chooseStatus: '',

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			};
		},
		computed: {},
		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			this.userAgent = userAgent;
			var that = this;
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.promotionList(page, pageSize); // 获取促销项目列表数据
			that.getPartner();
		},

		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//获取合伙人信息
			getPartner() {
				var that = this;
				that.$post({
					url: 'Partner/Setup/get_partner',
					data: {},
					success: function (data) {
						that.userinfo = data.data;
					}
				});
			},
			promotionList(page, pageSize) {
				var that = this;
				var start_time = that.start_time; // 查询条件开始时间
				var end_time = that.end_time; // 查询条件结束时间
				var status = that.chooseStatus; // status
				if (status == '999') {
					status = 0;
				}
				that.loading = true; //开启动画
				that.isLoad = false;
				// Ajax请求
				that.$post({
					url: 'Partner/Promotion/getPromotionList',
					data: {
						row: that.pageSize,
						page: that.pageNo,
						start_time: start_time ? start_time : '',
						end_time: end_time ? end_time : '',
						status: status
					},
					success: data => {
						that.loading = false; //开启动画
						that.isLoad = true;
						if (data.code == 1000) {
							//that.$message.success(data.message);
							that.tableData = data.data.data;
							that.totalDataNumber = data.data.page.total_number;
							that.pageNo = data.data.page.current_page;
						} else {
							that.$message.error(data.message);
						}
					}
				});
			},
			//每页
			handleSizeChange(val) {
				var that = this;
				that.pageNo = 1;
				that.pageSize = val; // 当前每页显示条数
				that.promotionList(that.pageNo, val); // 获取列表数据
			},
			//分页
			handleCurrentChange(val) {
				var that = this;
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				that.promotionList(val, pageSize); // 获取列表数据
			},
			//编辑
			edit(id) {
				this.$router.push({ path: '/promotionAdd', query: { id: id } });
			},
			//删除
			del(id) {
				this.$confirm('确定要删除该促销活动?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$post({
						url: 'Partner/Promotion/deletePromotion',
						data: { id: id },
						success: data => {
							if (data.code == 1000) {
								this.$message.success('删除促销项目成功');
								//成功后更新列表，且在当前页和当前每页条数
								this.promotionList(this.pageNo, this.pageSize);
							} else {
								this.$message.error(data.message);
							}
						}
					});
				}).catch(() => {

        });
			},
			//时间选择
			changeshow(vlue) { },
			//状态选择
			chooseStatusFun(vlue) {
				this.chooseStatus = vlue;
			},

			//重置
			reset() {
				this.start_time = '';
				this.end_time = '';
				this.pageNo = 1;
				this.chooseStatus = '';
				this.value2 = '';
				this.promotionList();
			},

			//搜索
			search_promotion() {
				this.pageNo = 1;
				this.promotionList();
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
			//添加园区
			promotionAdd() {
				this.$router.push({ path: '/promotionAdd' });
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},
		beforeRouteLeave(to, from, next) {
			let updates = ["/promotionAdd"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false;
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}
	};
</script>
<style>
	#promotionList {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	.module-result-content {
		flex: 1;
		display: flex;
		flex-direction: column;

	}

	.module-result-content .result-content {
		flex: 1;
		position: relative;

	}

	.module-result-content .result-content .el-table {
		position: absolute;
		width: 100%
	}
	
</style>